<template>
  <div class="all-page-heiht">
    <!-- <el-row class="activity-row-title"> <h1>活动表单创建</h1> </el-row> -->
     <el-row class="goods-list-title" ><h1>活动创建</h1></el-row>
    <el-card>
      <div class="activity-main">
        <el-row>
          <el-tag size="large" effect="dark">信息填写</el-tag>
        </el-row>
        <el-form class="margin-top-20">
          <!-- 活动信息 -->
          <el-row :gutter="12">
            <el-col :span="6"
              ><el-form-item label="活动名字:">
                <el-input
                  v-model="activityName"
                  placeholder="输入本次活动名字"
                ></el-input> </el-form-item
            ></el-col>
            <el-col :span="18">
              <el-form-item label="活动信息:">
                <el-input
                  v-model="activityDetail"
                  :rows="1"
                  type="textarea"
                  placeholder="输入本次活动的介绍信息"
              /></el-form-item>
            </el-col>
          </el-row>
          <!-- 活动信息 -->
          <el-row :gutter="12" class="margin-top-20">
            <el-col :span="16"
              ><el-form-item label="活动规则:">
                <el-input
                  placeholder="输入本次活动规则"
                  v-model="activityRule"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>
          <!-- 开始时间 -->
          <el-row class="margin-top-20">
            <el-tag size="large" effect="dark" style="background-color: #eebe77"
              >时间选择</el-tag
            >
          </el-row>
          <el-row class="margin-top-20 row-center-style" :gutter="6">
            <el-form-item label="开始时间:">
              <el-col :span="12">
                <el-date-picker
                  v-model="activityStartTime"
                  type="datetime"
                  placeholder="选择开始日期"
                  format="YYYY/MM/DD HH:mm:ss"
                  :shortcuts="shortcuts"
                />
              </el-col>
            </el-form-item>
          </el-row>
          <!-- 结束时间 -->
          <el-row class="margin-top-20 row-center-style" :gutter="6">
            <el-form-item label="结束时间:">
              <el-col :span="12">
                <el-date-picker
                  v-model="activityEndTime"
                  type="datetime"
                  placeholder="选择结束日期"
                  format="YYYY/MM/DD HH:mm:ss"
                  :shortcuts="shortcuts"
                />
              </el-col>
            </el-form-item>
          </el-row>
          <el-row class="margin-top-20">
            <el-tag size="large" effect="dark" style="background-color: #529b2e"
              >产品选择</el-tag
            >
          </el-row>
          <!-- 产品品选择区 -->
          <el-collapse class="margin-top-25">
            <el-collapse-item title="点击该行进行选择">
            
              <el-table
                :data="innerTableData"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }"
                  highlight-current-row
                   @current-change="TableCurrentChange"
              >
              <el-table-column prop="goodName" label="产品名字"></el-table-column>
              <el-table-column prop="goodStock" label="产品目前库存"></el-table-column>
              <el-table-column prop="goodPrice" label="秒杀价"></el-table-column>
              <el-table-column label="是否可选">
                <template  #default="props">
                  <el-tag v-if="props.row.status===1" type="success" effect="dark">是</el-tag>
                  <el-tag v-else type="danger" effect="dark" >否</el-tag>
                </template>
              </el-table-column>
              </el-table>
              <el-row class="el-row-center"> <el-pagination
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="total"
              @current-change="handleCurrentChange"
          >
      </el-pagination></el-row>
            </el-collapse-item>
          </el-collapse>
          <!-- 规则配置 -->
          <br />
          <el-row class="margin-top-20 row-center-style">
            <el-button type="success" @click="createActivityBtn"
              >开始创建</el-button
            >
             <el-button type="primary" @click="resetFormBtn"
              >重置表单</el-button
            >
          </el-row>
        </el-form>
      </div>
    </el-card>
   <!-- 确认表单对话框-->
   <el-dialog
    v-model="confirmFormDialogVisible"
    title="最后确认表单"
    width="30%"
  >
    <el-form>
      <el-form-item label="活动名字"> {{activityName}} </el-form-item>
       <el-form-item label="活动规则"> {{activityRule}} </el-form-item>
        <el-form-item label="活动详情"> {{activityDetail}} </el-form-item>
        <el-form-item label="开始时间"> {{activityStartTime}} </el-form-item>
        <el-form-item label="结束时间">{{activityEndTime}} </el-form-item>
        <el-form-item label="商品名字">{{recordCurrentRowInfo.goodName}}</el-form-item>
    </el-form> 
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetFormBtn">再想想</el-button>
        <el-button type="primary" v-loading="BtnLoading" @click="confirmCreateActivityBtn"
          >确定添加</el-button
        >
      </span>
    </template>
  </el-dialog>




  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted,ToRefs } from "vue";
import { ApiGoodsList, ApiAddActivity } from "@/api/index";
import { errorMessage, successMessage, warnMessage } from "@/utils/messageTips";
import { ElMessageBox } from "element-plus";
import dayjs from "dayjs";
import moment from "moment";
export default defineComponent({
  name: "ActivityCreate",
  setup() {
    // 时间管理区域
    const shortcuts = [
      {
        text: "今天",
        value: new Date(),
      },
      {
        text: "明天",
        value: () => {
          const date = new Date();
          date.setTime(date.getTime() + 3600 * 1000 * 24);
          return date;
        },
      },
      {
        text: "一周后",
        value: () => {
          const date = new Date();
          date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
          return date;
        },
      },
    ];

    // 时间表单
    let myTimePick = reactive({
      startTime1: "",
      startTime2: "",
      endTime1: "",
      endTime2: "",
    });

    // 第二版本代码区
    let ActivityCreateFrom = reactive<IGCreateActivity>({
      activityName: null,
      activityDetail: null,
      activityRule: null,
      activityStartTime: null,
      activityEndTime: null,
      goodId: null,
      isShow: 0,
    });



    // 内联商品表格区域
    let usedInfo = reactive<IGPageInfo>({
      pageNum: 1,
      total: 2,
      pages: 2,
      pageSize: 15,
    });
    let recordCurrentRowInfo = ref<any>({}) //暂时缓存选择商品信息
    let innerTableData = ref<Array<any>>([]);
    const getInnerGoodsTable = async () => {
      const { data: res } = (await ApiGoodsList(usedInfo.pageNum)) as Record<
        string,
        any
      >;
      innerTableData.value = res.list
        usedInfo.total = res.total;
      usedInfo.pages = res.pages;
      usedInfo.pageSize =res.pageSize
    };
    // 选择商品的时候
    const TableCurrentChange  = (currentRowInfo:any)=>{
      if(currentRowInfo.status!=1){
        return errorMessage("当前商品不可上架！！")
      }
      Object.assign(recordCurrentRowInfo.value,currentRowInfo)
      ActivityCreateFrom.goodId=currentRowInfo.goodId
    }
    // 页码改变
    const handleCurrentChange = (val: number) => {
      usedInfo.pageNum = val;
      getInnerGoodsTable();
    };

    // 弹出框
   let  confirmFormDialogVisible = ref<boolean>(false)
   let BtnLoading = ref<boolean>(false)
     //  重置表单
   const resetFormBtn = ()=>{
       for(let key in ActivityCreateFrom){
         ActivityCreateFrom[key as keyof IGCreateActivity]=null
       }
       ActivityCreateFrom.isShow = 0
       confirmFormDialogVisible.value=false
   } 

      // 创建按钮
    const createActivityBtn = () => {

      // 时间规范拼接
      ActivityCreateFrom.activityStartTime = dayjs(
        ActivityCreateFrom.activityStartTime
      ).format("YYYY-MM-DD HH:mm:ss");
      ActivityCreateFrom.activityEndTime = dayjs(
        ActivityCreateFrom.activityEndTime
      ).format("YYYY-MM-DD HH:mm:ss");
     
      for(let key in ActivityCreateFrom){
        if(ActivityCreateFrom[key as keyof IGCreateActivity] == null){
          return errorMessage("您还没有填完整!!!")
        }
      }
      confirmFormDialogVisible.value = true
    };
    
    // 确认创建活动
   const confirmCreateActivityBtn = async ()=>{
     BtnLoading.value = true
       const res =  await ApiAddActivity(ActivityCreateFrom) as Record<string,any>
       successMessage(res.message)
       BtnLoading.value = false
       resetFormBtn()
   }


    onMounted(() => {
      getInnerGoodsTable();
    });

    return {
      // 第二 版本代码区
      ...toRefs(ActivityCreateFrom),
      ...toRefs(myTimePick),
      createActivityBtn,
      shortcuts,
      innerTableData,
      handleCurrentChange,
      ...toRefs(usedInfo),
      TableCurrentChange,
      confirmFormDialogVisible,
      recordCurrentRowInfo,
      resetFormBtn,
      confirmCreateActivityBtn,
      BtnLoading
    };
  },
});
</script>
<style lang="less" scoped>
.radio-card {
  display: flex;
}
.creatBtn-class {
  margin-top: 20px;
}
.activity-row-title {
  display: flex;
  justify-content: center;
  h1 {
    color: rgb(109, 135, 221);
    font-size: 20px;
  }
}
.el-form-item {
  margin-bottom: 0px;
}
.choice-flex {
  width: 60%;
  display: flex;
  vertical-align: text-bottom;
  justify-content: space-between;
  align-items: center;
}
.row-center-style {
  display: flex;
  justify-content: center;
}.goods-list-title {
  display: flex;
  justify-content: center;
  h1 {
    color: rgb(109, 135, 221);
    font-size: 20px;
  }
}
</style>